<template>
  <el-form
    ref="selectFormRef"
    :rules="rules"
    :model="dialogForm"
    label-width="120px"
  >
    <el-form-item label="选择数据源：" prop="sourceDataId">
      <el-select
        v-model="dialogForm.sourceDataId"
        style="width: 100%"
        filterable
        clearable
        placeholder="请选择目标数据库"
        @change="changeDataBase"
      >
        <el-option
          v-for="item in dataBases"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选择源头表：" prop="sourceTableNames">
      <el-transfer
        v-model="dialogForm.sourceTableNames"
        :titles="['待选列表', '已选列表']"
        :data="transferData"
        @change="handleChange"
      >
        <template #default="{ option }">
          <div class="transfor-item">
            <el-popover
              placement="top-start"
              :width="200"
              title=""
              trigger="hover"
              :content="`${option.label}`"
            >
              <template #reference>
                <span class="label-item">{{ option.label }}</span>
              </template>
            </el-popover>
          </div>
        </template>
      </el-transfer>
    </el-form-item>
    <el-form-item label="目标数据源：" prop="targetSourceDataId">
      <el-select
        v-model="dialogForm.targetSourceDataId"
        style="width: 100%"
        filterable
        clearable
        placeholder="请选择目标数据库"
      >
        <el-option
          v-for="item in dataBases"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "SelectDataSource",
  props: {
    configInfo: {
      type: Object,
      default: () => {},
    },
    dataBases: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    configInfo: {
      handler(val, oldVal) {
        this.dialogForm = {
          ...this.configInfo
        }
        if (val.sourceDataId) {
          this.dialogForm.sourceDataId = String(val.sourceDataId);
          this.getDbTables(val.sourceDataId);
        }
        if (val.targetSourceDataId) {
          this.dialogForm.targetSourceDataId = String(val.targetSourceDataId);
        }
        this.dialogForm.sourceTableNames = val.sourceTableNames || [];
        this.originSourceTableNames = val.sourceTableNames
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      transferData: [],
      originSourceTableNames: [],
      dialogForm: {
        sourceDataId: null,
        sourceTableNames: [],
        targetSourceDataId: null,
      },
      rules: {
        sourceDataId: [
          { required: true, message: "数据源不能为空!", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleChange(val1, val2) {
      if (val2 == 'left') {
        let needRemoveList = this.originSourceTableNames.filter((item) => !val1.includes(item))
        needRemoveList.forEach((item) => {
          let removeId = ""
          if (this.dialogForm.cleanDataMap) {
            for (let k in this.dialogForm.cleanDataMap) {
              let table = k.split("^");
              if (table[0] == item) {
                delete this.dialogForm.cleanDataMap[k]
                removeId = table[1]
              } 
            }
          }
          if (this.dialogForm.filterDataMap) {
            for (let k in this.dialogForm.filterDataMap) {
              let table = k.split("^");
              if (table[0] == item) {
                delete this.dialogForm.filterDataMap[k]
                removeId = table[1]
              } 
            }
          }
          if (this.dialogForm.mappings) {
            for (let k in this.dialogForm.mappings) {
              let table = k.split("^");
              if (table[0] == item) {
                delete this.dialogForm.mappings[k]
                removeId = table[1]
              } 
            }
          }
        })
      }
    },
    // 改变目标数据源
    changeDataBase(val) {
      this.getDbTables(val);
    },
    // 根据数据源查询源头表
    getDbTables(id) {
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getDbTableById, {
          params: { id },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.transferData = (res.data.data || []).map((i) => {
              return { key: i, label: i };
            });
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    // 用于父组件收集数据
    getData() {
      return new Promise((resolve, reject) => {
        this.$refs.selectFormRef.validate((valid) => {
          if (valid) {
            resolve(this.dialogForm);
          } else {
            this.$message.warning("【选择数据源】数据源不能为空");
            reject(false);
          }
        });
      });
    },
  },
};
</script>
<style scoped></style>
